<template>
  <div class="project-information">
    <el-breadcrumb>
      <el-breadcrumb-item :to="{ path: '' }">详情</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/administrators' }">主页</el-breadcrumb-item>
      <el-breadcrumb-item>{{ interfaceName }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ entryName }} - 详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="body">
      <div class="left">
        <ul>
          <li
            @click="
              () => {
                $router.push('/administrators/information/basix')
                pages = 0
              }
            "
            @click.stop="selectAction('basix')"
            :class="{ action: isActive('basix') }"
          >
            <el-icon :size="25"><Document /></el-icon>
            <p>基本情况</p>
          </li>
          <li
            @click="
              () => {
                $router.push('/administrators/information/members')
                pages = 1
              }
            "
            @click.stop="selectAction('members')"
            :class="{ action: isActive('members') }"
          >
            <el-icon :size="25"><UserFilled /></el-icon>
            <p>项目成员&指导老师</p>
          </li>
          <li
            @click="
              () => {
                $router.push('/administrators/information/basis')
                pages = 2
              }
            "
            @click.stop="selectAction('basis')"
            :class="{ action: isActive('basis') }"
          >
            <el-icon :size="25"><Collection /></el-icon>
            <p>立项依据</p>
          </li>
          <li
            @click="
              () => {
                $router.push('/administrators/information/budget')
                pages = 3
              }
            "
            @click.stop="selectAction('budget')"
            :class="{ action: isActive('budget') }"
          >
            <el-icon :size="25"><DataLine /></el-icon>
            <p>经费预算</p>
          </li>
          <li
            @click="
              () => {
                $router.push('/administrators/information/attachment')
                pages = 4
              }
            "
            @click.stop="selectAction('attachment')"
            :class="{ action: isActive('attachment') }"
          >
            <el-icon :size="25"><Download /></el-icon>
            <p>项目附件</p>
          </li>
          <li
            @click="
              () => {
                $router.push('/administrators/information/comment')
                pages = 5
              }
            "
            @click.stop="selectAction('comment')"
            :class="{ action: isActive('comment') }"
          >
            <el-icon :size="25"><Document /></el-icon>
            <p>审核意见</p>
          </li>
          <li
            @click="
              () => {
                $router.push('/administrators/information/status')
                pages = 6
              }
            "
            @click.stop="selectAction('status')"
            :class="{ action: isActive('status') }"
          >
            <el-icon :size="25"><Clock /></el-icon>
            <p>项目状态&进度</p>
          </li>
        </ul>
      </div>
      <div class="right">
        <el-scrollbar height="500px">
          <transition name="slide-fade" mode="out-in">
            <router-view></router-view>
          </transition>
          <div class="line-bottom"></div>
          <div class="button">
            <div>
              <el-button @click="back" v-show="pages !== 0"
                ><el-icon><Back /></el-icon>上一页</el-button
              >
            </div>
            <div>
              <el-button type="primary" @click="next" v-show="pages !== 6"
                >下一页<el-icon><Right /></el-icon
              ></el-button>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()

const pages = ref(0)
const back = () => {
  pages.value--
  toRoute(pages.value)
}

const next = () => {
  pages.value++
  toRoute(pages.value)
}
const toRoute = (value) => {
  if (value === 0) {
    router.push('basix')
    activeAction.value = 'basix'
  } else if (value === 1) {
    router.push('members')
    activeAction.value = 'members'
  } else if (value === 2) {
    router.push('basis')
    activeAction.value = 'basis'
  } else if (value === 3) {
    router.push('budget')
    activeAction.value = 'budget'
  } else if (value === 4) {
    router.push('attachment')
    activeAction.value = 'attachment'
  } else if (value === 5) {
    router.push('comment')
    activeAction.value = 'comment'
  } else if (value === 6) {
    router.push('status')
    activeAction.value = 'status'
  }
}
// const count = ref(0)

const activeAction = ref('basix')
const selectAction = (action) => {
  activeAction.value = action // 更新当前激活的action
  // 这里可以添加其他逻辑，如导航守卫中的逻辑
}
const isActive = (action) => {
  return activeAction.value === action // 判断当前action是否激活
}

const queryParams = route.query
const interfaceName = queryParams.interface
const entryName = queryParams.entryName
</script>

<style>
.project-information .el-table th {
  background-color: #1461cd !important;
  color: white !important;
  /* text-align: center; */
  /* padding: 10px;  */
}
</style>

<style lang="less" scoped>
.project-information {
  padding: 40px 30px;
  .line-bottom {
    width: 96%;
    border-bottom: 1px solid #e2e2e2;
    margin-bottom: 50px;
    margin-top: 50px;
  }
  .body {
    background-color: #fff;
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    padding: 30px 25px;
  }
  .left {
    width: 25%;
    border-right: 1px #dbdbdb solid;
    padding: 40px 20px;
    ul {
      li {
        padding-left: 20px;
        display: flex;
        align-items: center;
        height: 50px;
        color: #50566a;
        border-radius: 5px;
        margin-bottom: 2px;
        // transition: all 0.2s;
        .el-icon {
          margin-right: 10px;
          color: #959cb6;
        }
        &:hover {
          color: #5d78ff;
          background-color: #e6f0ff;
          .el-icon {
            color: #5d78ff;
          }
        }
        &.action {
          color: #5d78ff;
          background-color: #e6f0ff;
          .el-icon {
            color: #5d78ff;
          }
        }
      }
    }
  }
  .right {
    padding-left: 78px;
    // background-color: #ccc;
    // padding-bottom: 20px;
    width: 75%;
    .button {
      display: flex;
      justify-content: space-between;
      padding-right: 40px;
      margin-bottom: 30px;
    }
  }
}
</style>
